<template>
  <div class="common-box">
    <div class="content-item">
      <div class="item-left">
        <img
          class="item-left-img"
          src="@/assets/img/electric/icon-3.png"
          alt=""
        />
        <span class="item-left-span">{{ cardTitle }}</span>
      </div>
      <div class="item-right">
        <span class="item-right-title">环境温度</span>
        <span class="item-right-num">{{ num }}℃</span>
      </div>
    </div>
    <div class="content-card">
      <div class="commom-card" v-for="(item, index) in lists" :key="index">
        <div class="card-title">{{ index + 1 }}号变压器</div>
        <div class="card-list">
          <div class="card-item">
            <div class="item-left">
              <span class="box" :style="{ 'background-color': color(item.status) }"></span>
              <span class="title">负荷值</span>
            </div>
            <div class="item-right">
              <span class="num" :style="{ color: color(item.status) }">{{ item.fhz }}</span>
              <span class="cam">KW</span>
            </div>
          </div>
          <div class="card-item">
            <div class="item-left">
              <span class="box" :style="{ 'background-color': color(item.status) }"></span>
              <span class="title">负荷率</span>
            </div>
            <div class="item-right">
              <span class="num" :style="{ color: color(item.status) }">{{ item.fhl }}</span>
            </div>
          </div>
          <div class="card-item">
            <div class="item-left">
              <span class="box" :style="{ 'background-color': color(item.status) }"></span>
              <span class="title">运行状态</span>
            </div>
            <div class="item-right">
              <span class="num" :style="{ color: color(item.status) }">{{ item.status }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    lists: {
      typeof: Array,
      default: () => []
    },
    cardTitle: {
      typeof: String,
      default: ''
    },
    num: {
      typeof: String,
      default: ''
    }
  },
  data() {
    return {};
  },

  components: {},

  computed: {
    color() {
      return function(status) {
        let str = '#57FFAA';
        switch (status) {
          case '运行':
            str = '#57FFAA';
            break;
          case '备用':
            str = '#FFD101';
            break;
        }
        return str;
      };
    }
  },

  methods: {}
};
</script>
<style scoped lang="scss">
.common-box{
  .content-item {
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .9375rem;
    .item-left {
      .item-left-img {
        width: 1rem;
        height: 1rem;
        margin-right: 0.625rem;
        vertical-align: middle;
      }
      .item-left-span {
        font-size: 1rem;
        color: #f8f8f8;
        vertical-align: middle;
      }
    }
    .item-right-title {
      color: #adadad;
      font-size: 0.75rem;
      margin-right: 0.3125rem;
    }
    .item-right-num {
      color: #ff6a2f;
      font-size: 0.875rem;
      margin-right: 0.3125rem;
    }
  }
  .content-card{
    display: flex;
    justify-content: space-between;
    .commom-card {
      flex: 1;
      margin-right: .375rem;
      border-radius: 0.25rem;
      background-color: #2a3a4f;
      padding: .9375rem 0;
      box-sizing: border-box;
      .card-title {
        height: .875rem;
        font-size: 0.875rem;
        line-height: .875rem;
        color: #f8f8f8;
        padding-left: .5rem;
        margin-bottom: 1rem;
        border-left: 2px solid #00fdff;
        box-sizing: border-box;
      }
      .card-list{
        height: 3.8125rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .card-item {
          height: .875rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0.625rem 0;
          box-sizing: border-box;
          .item-left {
            display: flex;
            align-items: center;
            .box {
              width: 0.1875rem;
              height: 0.1875rem;
              border-radius: 50%;
              margin-right: .625rem;
              display: block;
            }
            .title {
              font-size: 0.75rem;
              color: #d8d8d8;
            }
          }
          .item-right {
            .num {
              font-size: 0.875rem;
              margin-right: 0.125rem;
            }
            .cam {
              font-size: 0.75rem;
              color: #8d8d8d;
            }
          }
        }
      }
    }
    .commom-card:nth-of-type(2n){
      margin-right: 0;
    }
  }
}
</style>
